<!doctype html>
<html lang="en">	
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>01-js初始</title>
		<style>
			*{margin:0;padding:0;}
			a{text-decoration:none;}
			ul,li{list-style:none;}
			body{font-size:12px;font-family:"微软雅黑";}
			#box{
				width:100px;
				height:100px;
				background-color:red;
			}
			#box2{
				width:100px;
				height:100px;
				background-color:yellow;
			}

		</style>
	</head>
	<body>
		
		<div id="box"></div>
		<div id="box2"></div>

		<script type="text/javascript">
			//通过id获取元素
			var dom = document.getElementById("box");
			var dombox =document.getElementById("box2");
			//鼠标点击事件
			/*dom.onclick = function(){
				alert("点击");
			}*/
			//双击事件
			/*dom.ondblclick = function(){
				alert("双击");
			}*/
			//鼠标按下事件   在用户按下鼠标按钮时触发
			/*dom.onmousedown = function(){
				console.log("1");
			}*/
			//鼠标释放移出事件
			/*dom.onmouseup = function(){
				alert("鼠标释放");
			}*/
			//mousemove：当鼠标指针在元素内部移动时重复地触发
			/*dom.onmousemove = function(){
				console.log(1);
			}*/
			//mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发
			dom.onmouseenter = function(){
				//console.log("移入");
				//dombox.style.display="none";
				dombox.style.width="200px";
				dombox.style.height="200px";
			}
			//mouseleave 在位于元素上方的鼠标光标移动到元素范围之外时触发
			dom.onmouseleave = function(){
				//console.log("移出");
				//dombox.style.display="block";
				dombox.style.background="pink";
			}
		</script>	
		
	</body>
</html>
